<template>
	<view class="content">

		<view class="card">
			<u-steps :current="current" activeIcon="checkmark-circle-fill" inactiveIcon="hourglass-half-fill" inactiveColor="#ccc"
				activeColor="#FFCE4E">
				<u-steps-item title="验证旧手机号"></u-steps-item>
				<u-steps-item title="设置新手机号"></u-steps-item>
			</u-steps>
		</view>
		<view class="card">
			<view class="title">
				您的账号：{{phone}}
			</view>
			<u--form labelPosition="left" :model="model" ref="form" labelWidth="200rpx">
				<u-form-item :label="current==0?'旧手机号':'新手机号'" leftIcon="lock-fill" leftIconStyle="font-size:40rpx;"
					labelPosition="top">
					<view class=""
						style="margin-top: 34rpx;background: rgba(132, 132, 132, .1);border-radius:40rpx;padding: 18rpx 30rpx;">
						<u--input :disabled="current==0" v-model="phone" shape="circle" border="none" disabledColor="rgba(0,0,0,0)" maxlength="11"></u--input>
					</view>
				</u-form-item>
				<u-form-item label="验证码" leftIcon="lock-fill" leftIconStyle="font-size:40rpx;" labelPosition="top">
					<view class=""
						style="margin-top: 34rpx;background: rgba(132, 132, 132, .1);border-radius:40rpx;padding: 18rpx 30rpx;display: flex;">
						<u--input v-model="code" border="none"></u--input>
						<view class="code" :class="{forbid:codeTime>0}" slot="right" @click="getCode">
							{{codeTime>0?`${codeTime}s 后重新获取`:'获取验证码'}}
						</view>
					</view>
				</u-form-item>
			</u--form>
			<view class="btn" @click="submit">
				{{current?'验证手机号':'确认修改'}}
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				codeTime: -1,
				current: 0
			}
		},
		onLoad(e) {
			this.phone = e.phone
		},
		methods: {

			getCode() {
				if (this.codeTime > 0) return;
				this.codeTime = 10
				this.$myRequest('/api/account/v2/sms/get', {
					mobile: this.phone
				}, 'POST')
				let time = setInterval(() => {
					if (this.codeTime < 0) return clearInterval(time)
					this.codeTime--
				}, 1000)
			},
			submit() {
				let data = {}
				let url = ''
				if (this.current == 0) {
					url = '/api/user/v1/confirm'
					data = {
						"oldPhone": this.phone,
						"oldPhoneCode": this.code
					}
				} else {
					url = '/api/user/v1/updateUser'
					data = {
						"phone": this.phone,
						"phoneCode": this.code
					}
				}
				this.$myRequest(url, data, 'POST').then(res => {
					if (this.current == 0) {
						this.current = 1
						this.code = ''
						this.phone = ''
						this.codeTime = 0
					} else {
						this.$refs.uToast.show({
							type: 'success',
							message: "修改成功",
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}

				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		min-height: calc(100vh - 40rpx);
		background-color: #f5f5f5;
	}

	.title {
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx;
	}

	.card {
		padding: 40rpx;
		background: #ffffff;
		border-radius: 12rpx;
	}

	.code {
		padding: 5rpx 10rpx;
		width: 220rpx;
		text-align: center;
		color: $theme-color;
		border-radius: 4rpx;
		border-left: 2rpx solid $theme-color;
	}

	.forbid {
		color: #999999;
	}

	.btn {
		background-color: $theme-color;
		width: 478rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		border-radius: 37rpx;

		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>
